import { memo, useCallback, useRef, useState } from "react"
import { BaseContiner, TableContainer, TableHeader } from "../../../csscomponents/base"
import { Button, Col, Flex, Form, Input, Modal, Row, Space, Table } from "antd";
import {
    PlusOutlined
} from '@ant-design/icons';
import { useForm } from "antd/es/form/Form";
import { IBeefType, IBeefTypeSearchParams, useDeletedBeefType, useGetBeefType } from "../../../service/beef-type-service";
import { ErrorBox } from "../../../components/error-box";
import BeefTypeForm from "./beef-type-form";
import { IFormRef } from "../../../types";

export const BeefTypePage = () => {

    const defaultQueryParams: IBeefTypeSearchParams = {
        beefTypeName: "",
        page: 1,
        limit: 10
    }
    const [queryForm] = useForm();
    const [open, setOpen] = useState<boolean>(false);
    const [updateBeefType, setUpdateBeefType] = useState<IBeefType>();
    const FormRef = useRef<IFormRef>();
    const openFn = useCallback((open: boolean) => {
        setOpen(open)
    }, [])
    /**
     * 搜索参数
     */
    const [queryParams, setQueryParams] = useState<IBeefTypeSearchParams>(defaultQueryParams)

    /**
     * 搜索角色列表Handler
     * @param values 搜索参数
     */
    const onFinish = (values: { beefTypeName: string }) => {
        setQueryParams({
            ...queryParams,
            beefTypeName: values.beefTypeName,
            page: 1,
            limit: 10
        })
    }
    /**
     * 重置方法
     */
    const resetQueryParams = () => {
        queryForm.resetFields();
        setQueryParams(defaultQueryParams);
    }


    /**删除角色 */
    const removeBeefTypeHandler = (beefTypeId: number) => {
        Modal.confirm({
            title: '⚠️警告',
            content: '你确认执行改操作吗?',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
                await deleteBeefTypeMutation({ beefTypeId });
                refetch();
            },
        });
    };

    /**
     * !获取矛盾纠纷类型列表Hook
     */
    const { isLoading, isError, data: dataSource, error, refetch } = useGetBeefType(queryParams);

    /**
     * !删除矛盾纠纷类型HOOK
     */
    const { mutateAsync: deleteBeefTypeMutation, isLoading: DIsLoading } = useDeletedBeefType();
    /**
     * 分页配置
     */
    const paginationProps = {
        total: dataSource?.count,
        pageSize: queryParams.limit,
        current: queryParams.page,
        showTotal: (count: number) => {
            return `共 ${count} 条`;
        },
        onChange: (pageNum: number) => {
            setQueryParams({ ...queryParams, page: pageNum });
        },
    };
    const columns = [
        {
            title: '类型ID',
            dataIndex: 'beefTypeId',
            key: 'beefTypeId',
        },
        {
            title: '矛盾纠纷类型名称',
            dataIndex: 'beefTypeName',
            key: 'beefTypeName',
        },
        {
            title: '更多操作',
            render(project: IBeefType) {
                return (
                    <div>
                        <Button
                            style={{ marginRight: '1.2rem' }}
                            onClick={() => {
                                setUpdateBeefType(project);
                                setOpen(true);
                            }}
                        >
                            修改
                        </Button>
                        <Button
                            loading={DIsLoading}
                            danger
                            onClick={() => removeBeefTypeHandler(project.beefTypeId)}
                        >
                            删除
                        </Button>
                    </div>
                );
            },
        },
    ];
    return <BaseContiner>
        <TableHeader>
            <Form
                form={queryForm}
                style={{ width: '100%' }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Row gutter={16}>
                    <Col span={10}>
                        <Form.Item label="类型名称" name="beefTypeName" >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={10}>
                        <Form.Item >
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                                <Button type="primary" onClick={() => resetQueryParams()}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Flex gap="small" justify="flex-end">
                            <Button type="primary" icon={<PlusOutlined />} onClick={() => {
                                if (FormRef.current?.reset) {
                                    FormRef.current?.reset();
                                }
                                setUpdateBeefType(undefined)
                                setOpen(true);
                            }}>
                                添加
                            </Button>
                        </Flex>
                    </Col>
                </Row>
            </Form>
        </TableHeader>
        <TableContainer>
            {isError ? (
                <ErrorBox error={error as { message: string }} />
            ) : (
                <Table
                    rowSelection={{ type: 'checkbox' }}
                    pagination={paginationProps}
                    dataSource={dataSource?.list}
                    columns={columns}
                    loading={isLoading}
                    rowKey={(row) => row?.beefTypeId}
                />
            )}
        </TableContainer>
        <BeefTypeForm open={open} onRef={FormRef} openFn={openFn} refetch={refetch} beefType={updateBeefType} />
    </BaseContiner>
}

export default memo(BeefTypePage)